<template>
	<view class="content">
		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" :refresher-enabled="props.currentIndex === 1? true:false"
			:loading-more-enabled="props.currentIndex === 1? true :false" v-model="dataList" @query="queryList"
			:fixed="false">
			<view v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
				<!-- 家风家训 -->
				<view class="tab1-item w-690 m-auto mt-40" :class="[index===0 ? 'mt-40' :''] " v-if="props.tabIndex === 0">
					<view class="tab1-item w-690 m-auto mt-40" v-if="props.tabIndex === 0">
						<view class="top" @touchstart.stop="" @touchend.stop="">
							<view class="flex justify-end align-items-center">
								<view class="sound flex-center text-581403 f-24 mr-20" @click="playAudio">
									<image src="/src/static/icon-11.png" class="w-28 h-28 mr-6"></image>
									朗读
								</view>
							</view>
							<view class="text-592E22 f-40 text-600">家风家训：</view>
							<view class="richText overflow-y mt-30">
								<view class="w-full h-full" v-html="item.content"></view>
							</view>
						</view>
						<view class="bottom" @touchstart.stop="" @touchend.stop="">
							<view class="text-592E22 f-40 text-600">解释：</view>
							<view class="richText overflow-y mt-30">
								<view class="w-full h-full" v-html="item.explanation"></view>
							</view>
						</view>
					</view>
				</view>

				<!-- 名人堂 -->
				<view class="tab2-item w-690 p-40 m-auto mt-40 flex align-items-center" :class="[index===0 ? 'mt-40' :''] "
					v-else-if="props.tabIndex === 1" @click="$toPage(`/pages/history/tab2-detail?id=${item.id}`)">
					<image :src="item.avatar ? item.avatar:male" class="avatar"></image>
					<view class="flex flex-col justif-between h-full w-400 ml-30">
						<text class="f-32 text-592E22 text-bold">{{ item.name }}</text>
						<view class="flex ">
							<text class="text-93776F f-24">{{ item.dynasty }}</text>
							<text class="text-93776F f-24 ml-10">{{ `${item.birthYear} - ${item.deathYear}` }}</text>
						</view>
						<text class="text-93776F f-24 ellipsis">{{ item.briefIntro }}</text>
					</view>
				</view>

				<!-- 历史资料 -->
				<view class="tab2-item w-690 m-auto p-40 overflow-hidden" :class="[index===0 ? 'mt-40' :'']"
					v-else-if="props.tabIndex === 2" @click="$toPage(`/pages/history/tab3-detail?id=${item.id}`)">
					<view class="w-full content h-full">
						<view class="text-581403 f-28 f-28 flex">
							<text class="text-500 flex-none">主题：</text>
							<text class="text-bold ellipsis">{{ item.title }}</text>
						</view>
						<view class="text-581403 f-28 f-28 mt-10 flex">
							<text class="text-500 flex-none">副标题：</text>
							<text class="text-bold ellipsis">{{ item.subTitle }}</text>
						</view>
						<view class="text-581403 f-28 f-28 mt-10 flex">
							<text class="text-500 flex-none">发布时间：</text>
							<text class="text-bold ellipsis">{{ dayjs(item.publishTime).format('YYYY-MM-DD HH:mm:ss') }}</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import male from '@/static/male.png'

	const {
		api_get_familyPrecepts,
		api_get_hallOfFamePage,
		api_get_articlesPage
	} = useRequest();

	const props = defineProps({
		// 当前组件的index，也就是当前组件是swiper中的第几个
		tabIndex: {
			type: Number,
			default: function() {
				return 0;
			},
		},
		// 当前swiper切换到第几个index
		currentIndex: {
			type: Number,
			default: function() {
				return 0;
			},
		},
	});

	const paging = ref(null);
	const dataList = ref([]);
	const firstLoaded = ref(false);
	const isCurrentPage = ref(false);

	const reload = () => {
		paging.value && paging.value.reload();
	};

	const queryList = (pageNo, pageSize) => {
		if (props.tabIndex === 0) {
			// 家风家训
			api_get_familyPrecepts().then(res => {
					firstLoaded.value = true;
					paging.value.complete([res[0]])
					initAudio(res[0].audioPath);
				})
				.catch(res => {
					paging.value.complete(false);
				});
		} else if (props.tabIndex === 1) {
			// 名人堂
			const params = {
				page: pageNo - 1,
				size: pageSize,
			};
			api_get_hallOfFamePage(params).then(res => {
				firstLoaded.value = true;
				paging.value.complete(res.content)
			}).catch(res => {
				paging.value.complete(false);
			});
		} else if (props.tabIndex === 2) {
			// 历史资料
			const params = {
				page: pageNo - 1,
				size: pageSize,
			};
			api_get_articlesPage(params).then(res => {
				firstLoaded.value = true;
				paging.value.complete(res.content)
			}).catch(res => {
				paging.value.complete(false);
			});
		}
	};

	const itemClick = (item) => {
		console.log("点击了", item.title);
	};

	// 播放控制
	const isPlaying = ref(false);
	const innerAudioContext = ref(null);

	function initAudio(audioPath) {
		// 创建音频实例
		innerAudioContext.value = uni.createInnerAudioContext();
		// 设置音频源（支持本地和网络路径）
		innerAudioContext.value.src = audioPath;
		// 监听播放事件
		innerAudioContext.value.onPlay(() => {
			isPlaying.value = true;
			console.log("开始播放");
		});

		// 监听暂停事件
		innerAudioContext.value.onPause(() => {
			isPlaying.value = false;
			console.log("已暂停");
		});
	}

	function playAudio() {
		if (!innerAudioContext.value) return;
		isPlaying.value ? innerAudioContext.value.pause() : innerAudioContext.value.play();
	}

	watch(() => props.currentIndex,
		(newVal) => {
			if (newVal === props.tabIndex) {
				// 懒加载，当滑动到当前的item时，才去加载
				if (!firstLoaded.value) {
					// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
					nextTick(() => {
						setTimeout(() => {
							isCurrentPage.value = true;
						}, 100);
					});
				}
			}
		}, {
			immediate: true
		},
	);
</script>

<style scoped lang="scss">
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.content {
		height: 100%;
	}

	.sound {
		width: 128rpx;
		height: 56rpx;
		background-image: url('/src/static/bg-07.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 24rpx;
	}

	.tab1-item {
		.top {
			width: 690rpx;
			height: 638rpx;
			background-image: url('/src/static/bg-19.png');
			background-size: 100% 100%;
			overflow: hidden;
			padding: 60rpx 40rpx;

			.richText {
				height: 380rpx;
			}
		}

		.bottom {
			width: 690rpx;
			height: 1070rpx;
			background-image: url('/src/static/bg-20.png');
			background-size: 100% 100%;
			overflow: hidden;
			padding: 140rpx 40rpx 40rpx 40rpx;

			.richText {
				height: 760rpx;
			}
		}
	}

	.tab2-item {
		width: 690rpx;
		height: 220rpx;
		background-image: url('/src/static/bg-21.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}
</style>